<template>
  <div>
    <el-card class="headBox">
      <el-row :gutter="24" >
        <el-col :span="10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="">数据输入</span>
            </div>
            <div>
              <el-form ref="form" :model="form" label-width="200px">
                <el-form-item label="踏步宽b(mm)">
                  <el-input v-model="form.b" style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="踏步高h(mm)">
                  <el-input v-model="form.h" style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="梯段板净长l(mm)">
                  <el-input v-model="form.l"></el-input>
                </el-form-item>
                <el-form-item label="混凝土强度等级">
                  <el-select v-model="form.c" placeholder="请选择">
                    <el-option label="C15" value="15"></el-option>
                    <el-option label="C20" value="20"></el-option>
                    <el-option label="C25" value="25"></el-option>
                    <el-option label="C30" value="30"></el-option>
                    <el-option label="C35" value="35"></el-option>
                    <el-option label="C40" value="40"></el-option>
                    <el-option label="C45" value="45"></el-option>
                    <el-option label="C50" value="50"></el-option>
                    <el-option label="C55" value="55"></el-option>
                    <el-option label="C60" value="60"></el-option>
                    <el-option label="C65" value="65"></el-option>
                    <el-option label="C70" value="70"></el-option>
                    <el-option label="C75" value="75"></el-option>
                    <el-option label="C80" value="80"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="构件受力特征系数α">
                  <el-select v-model="form.a" placeholder="请选择">
                    <el-option label="2.1" value="2.1"></el-option>
                    <el-option label="2.4" value="2.4"></el-option>
                    <el-option label="2.7" value="2.7"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="活荷载标准值qK(KN/m)">
                  <el-input v-model="form.qk" ></el-input>
                </el-form-item>
                <el-form-item label="活荷载准永久值系数ψq">
                  <el-input v-model="form.q" ></el-input>
                </el-form-item>
                <el-form-item label="受拉钢筋强度设计值fy(N/mm2)">
                  <el-select v-model="form.fy" placeholder="请选择">
                    <el-option label="210" value="210"></el-option>
                    <el-option label="300" value="300"></el-option>
                    <el-option label="360" value="360"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="钢筋弹性模量ES(N/mm2)">
                  <el-select v-model="form.es" placeholder="请选择">
                    <el-option label="200000" value="200000"></el-option>
                    <el-option label="210000" value="210000"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="纵向受拉钢筋表面特征系数ν">
                  <el-select v-model="form.v" placeholder="请选择">
                    <el-option label="0.7" value="0.7"></el-option>
                    <el-option label="1.0" value="1.0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="">钢筋配筋</span>
            </div>
            <el-form ref="form" :model="form" label-width="150px">
              <el-form-item label="钢筋直径d (mm)">
                <el-input v-model="form.d" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="钢筋间距s (mm)">
                <el-input v-model="form.s" style="width: 200px"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
<!--           描述-->
          <el-card class="box-card">
            <el-descriptions title="常规数据" :column="3" border>
              <el-descriptions-item span="5" label="混凝土轴心抗压设计值fc (N/mm2)" >{{ form.fc }}</el-descriptions-item>
              <el-descriptions-item span="5" label="系数α1 ">{{form.a1}}</el-descriptions-item>
              <el-descriptions-item span="5" label="混凝土抗拉标准值ftk (N/mm2)"  >{{form.ftk}}</el-descriptions-item>
              <el-descriptions-item span="5" label="混凝土弹性模量EC (N/mm2)">{{ form.ec }}</el-descriptions-item>
              <el-descriptions-item span="5" label="板计算跨度l0=1.05ln (mm)">{{form.ln}}</el-descriptions-item>
              <el-descriptions-item span="5" label="恒荷载标准值gk（KN）">{{form.gk}}</el-descriptions-item>
              <el-descriptions-item span="5" label="总荷载设计值P（KN）">{{form.p}}</el-descriptions-item>
              <el-descriptions-item span="5" label="弯矩值MU（KN）">{{form.MU}}</el-descriptions-item>
              <el-descriptions-item label="规范内容" :contentStyle="{'text-align': 'right'}">混凝土结构设计</el-descriptions-item>
            </el-descriptions>
            <el-button type="success" round class="botton" @click="setdate()">生成常规数据并计算</el-button>
            <el-button type="danger" round class="botton" @click="reset()">重置</el-button>


          </el-card>

          <!--           描述-->

        </el-col>
        <el-col>
          <el-card class="headBox">
              <div>
                <el-table
                  :data="date.slice((currentPage-1)*size,currentPage*size)"
                  :header-cell-style="{textAlign:'center'}"
                  :cell-style="{textAlign:'center'}"
                  size="medium"
                  fit
                  border
                  style="width: 100%">
                  <el-table-column  label="配筋是否满足要求" width="150">
                    <template slot-scope="scope">
                      <el-tag type="success" v-if="scope.row.asm>scope.row.asr">满足</el-tag>
                      <el-tag type="danger" v-if="scope.row.asm<scope.row.asr">不满足</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="b" sortable label="踏步宽bstep(mm)" width="180"/>
                  <el-table-column prop="h" label="踏步高hstep(mm)" width="180"/>
                  <el-table-column prop="l" label="梯段板净长ln(mm)" width="180"/>
                  <el-table-column prop="c" label="混凝土强度等级" width="180"/>
                  <el-table-column prop="a" label="构件受力特征系数αcr" width="180"/>
                  <el-table-column prop="qk" label="活荷载标准值qK(KN)" width="180"/>
                  <el-table-column prop="q" label="活荷载准永久值系数ψq" width="180"/>
                  <el-table-column prop="fy" label="受拉钢筋强度设计值fy" width="180"/>
                  <el-table-column prop="es" label="钢筋弹性模量ES" width="180"/>
                  <el-table-column prop="v" label="纵向受拉钢筋表面特征系数ν" width="180"/>
                  <el-table-column prop="gk" label="恒荷载标准值gK(KN)" width="180"/>
                  <el-table-column prop="p" label="总荷载设计值p(KN)" width="180"/>
                  <el-table-column prop="h0" label="梯段板有效厚度h0(mm)" width="180"/>
                  <el-table-column prop="mu" label="弯矩M(KN)" width="180"/>
                  <el-table-column prop="ase" label="截面抵抗矩系数αS" width="180"/>
                  <el-table-column prop="rs" label="rs" width="180"/>
                  <el-table-column prop="asr" label="钢筋面积AS(mm2)" width="180"/>
                  <el-table-column prop="asm" label="钢筋实际配筋面积AS(mm2)" width="180"/>
                </el-table>
                <el-button type="success" round class="botton" @click="list">更新数据</el-button>
                <!-- 分页 -->
                <el-pagination
                  background
                  @current-change="currentChange"
                  @size-change="sizeChange"
                  :total="total"
                  style="padding: 30px 0; text-align: center;"
                  layout="total, sizes, prev, pager, next, jumper"/>
              </div>

          </el-card>
        </el-col>
      </el-row>


    </el-card>
  </div>

</template>

<script>
import loadApi from '@/api/tiduan';
import { tufang } from '@/api/tufang'
export default {
  name: 'tiduan',
  data() {
    return {
      total:50,
      currentPage:1,
      size:10,
      form: {
        b: '',
        h: '',l:"",c:'',
        a:'',qk:'',q:'',
        fy:'',es:'',v:'',
        d:'',s:"",
        fc:"",a1:'',ftk:'',ec:'',ln:'',
        gk:'',MU:'',p:"",h0:"",ase:'',rs:'',
      },
      date: {
        b: '',
        h: '',l:"",c:'',
        a:'',qk:'',q:'',
        fy:'',es:'',v:'',
        d:'',s:"",
        fc:"",a1:'',ftk:'',ec:'',ln:'',
        gk:'',MU:'',p:"",h0:"",ase:'',rs:'',asr:'',asm:''
      }
    }
  },
  mounted() {
    this.list()
  },
  methods:{
    reset(){
      this.form.b="",
      this.form.h="",
      this.form.l="",
      this.form.c="",
      this.form.a="",
      this.form.qk="",
      this.form.q="",
      this.form.fy="",
      this.form.es="",
      this.form.s="",
      this.form.v="",
      this.form.d="",
      this.form.fc="",
      this.form.a1="",
      this.form.ftk="",
      this.form.ec="",
      this.form.ln="",
      this.form.gk="",
      this.form.MU="",
      this.form.p="",
      this.form.h0="",
      this.form.ase="",
      this.form.rs=""
    },
    async list(){
      let res = await loadApi.listAll()
      this.total = res.data.length
      this.date=res.data
      console.log(res)
    },
    sizeChange(size){
      this.size=size;
      this.show()
    },
    currentChange(currentPage){
      this.currentPage=currentPage;
      this.show()
    },
    setdate(){
      switch (this.form.c) {
        case "15":this.form.fc=7.2,this.form.a1=0.99,this.form.ftk=1.27,this.form.ec=22000
          break
        case "20":this.form.fc=9.6,this.form.a1=1,this.form.ftk=1.54,this.form.ec=25500
          break
        case "25":this.form.fc=11.9,this.form.a1=1,this.form.ftk=1.78,this.form.ec=28000
          break
        case "30":this.form.fc=14.3,this.form.a1=1,this.form.ftk=2.01,this.form.ec=30000
          break
        case "35":this.form.fc=16.7,this.form.a1=1,this.form.ftk=2.20,this.form.ec=31500
          break
        case "40":this.form.fc=19.1,this.form.a1=1,this.form.ftk=2.39,this.form.ec=32500
          break
        case "45":this.form.fc=21.1,this.form.a1=1,this.form.ftk=2.51,this.form.ec=33500
          break
        case "50":this.form.fc=25.3,this.form.a1=1,this.form.ftk=2.64,this.form.ec=34500
          break
        case "55":this.form.fc=25.3,this.form.a1=1,this.form.ftk=2.74,this.form.ec=35500
          break
        case "60":this.form.fc=27.5,this.form.a1=0.98,this.form.ftk=2.85,this.form.ec=36000
          break
        case "65":this.form.fc=29.7,this.form.a1=0.97,this.form.ftk=2.93,this.form.ec=36500
          break
        case "70":this.form.fc=31.8,this.form.a1=0.96,this.form.ftk=2.99,this.form.ec=37000
          break
        case "75":this.form.fc=33.8,this.form.a1=0.95,this.form.ftk=3.05,this.form.ec=37500
          break
        case "80":this.form.fc=35.9,this.form.a1=0.94,this.form.ftk=3.11,this.form.ec=38000
          break
      }
      this.form.ln=1.05*this.form.l
      loadApi.tiduan(this.form).then(res=> {
        if (res) {
          this.form.gk=res.data.gk
          this.form.p=res.data.p
          this.form.MU=res.data.mu
        }
      })
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 480px;
  margin-left: 30px;
  margin-top: 30px;
  border-radius: 30px;
}
.headBox{
  border-radius: 30px;
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}
.input{
  width: 150px;
}
.botton{
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  font-weight: lighter;
  width: 80%;
}
.my-label {
  background: #d1d9cd;
}

.my-content {
  background: #FDE2E2;
}
</style>
